﻿<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!--[if IE 8 ]><html class="ie" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US"><!--<![endif]-->
	<head>
		<!-- Basic Page Needs -->
		<meta charset="UTF-8">
		<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
		<title>Techno Store - Blog Single</title>

		<meta name="author" content="CreativeLayers">

		<!-- Mobile Specific Metas -->
	    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

		<!-- Boostrap style -->
		<link rel="stylesheet" type="text/css" href="/stylesheets/bootstrap.min.css">

		<!-- Theme style -->
		<link rel="stylesheet" type="text/css" href="/stylesheets/style.css">

		<!-- Reponsive -->
		<link rel="stylesheet" type="text/css" href="/stylesheets/responsive.css">

		<link rel="shortcut icon" href="/favicon/favicon.png">

	</head>
	<body class="header_sticky">
		<div class="boxed">

			<div class="overlay"></div>

			<!-- Preloader -->
			<div class="preloader">
				<div class="clear-loading loading-effect-2">
					<span></span>
				</div>
			</div><!-- /.preloader -->

			
			
			<div th:insert="~{header :: #header}"></div>

			<section class="flat-breadcrumb">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<ul class="breadcrumbs">
								<li class="trail-item">
									<a href="/page/index" title="">首页</a>
									<span><img src="/images/icons/arrow-right.png" alt=""></span>
								</li>
								<li class="trail-item">
									<a href="/page/recipes" title="">食谱列表</a>
									<span><img src="/images/icons/arrow-right.png" alt=""></span>
								</li>
								<li class="trail-end">
									<a href="#" title="">食谱详情</a>
								</li>
							</ul><!-- /.breacrumbs -->
						</div><!-- /.col-md-12 -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</section><!-- /.flat-breadcrumb -->

			<section class="main-blog">
				<div class="container">
					<div class="row">
						<div class="col-md-8 col-lg-9">
							<div class="post-wrap">
								<article class="main-post single">
									<div class="featured-post">
										<a href="#" title="">
											<img style="width: 847px;height: 345px;" th:src="'http://47.94.10.67/images/' + ${recipes.imgUrl}" alt="">
										</a>
									</div><!-- /.featured-post -->
									<div class="divider25"></div>
									<div class="content-post">
										<h3 class="title-post">
											<a title="" th:text="${recipes.title}"></a>
										</h3>
										<ul class="meta-post">
											<li class="comment">
												<a title="">发布时间：</a>
											</li>
											<li class="date">
												<a th:text="${#dates.format(recipes.updateTime,'yyyy年MM月dd日 HH:mm')}"></a>
											</li>
										</ul><!-- /.meta-post -->
										<div class="entry-post">
											<p th:each="string:${strings}" th:text="${string}"></p>

										</div><!-- /.entry-post -->
										<div class="social-single">
											<span><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">分享</font></font></span>
											<ul class="social-list style2">
												<li>
													<a href="#" title="">
														<i class="fa fa-facebook" aria-hidden="true"></i>
													</a>
												</li>
												<li>
													<a href="#" title="">
														<i class="fa fa-twitter" aria-hidden="true"></i>
													</a>
												</li>
												<li>
													<a href="#" title="">
														<i class="fa fa-instagram" aria-hidden="true"></i>
													</a>
												</li>
												<li>
													<a href="#" title="">
														<i class="fa fa-pinterest" aria-hidden="true"></i>
													</a>
												</li>
												<li>
													<a href="#" title="">
														<i class="fa fa-dribbble" aria-hidden="true"></i>
													</a>
												</li>
												<li>
													<a href="#" title="">
														<i class="fa fa-google" aria-hidden="true"></i>
													</a>
												</li>
											</ul>
										</div><!-- /.social-single -->
									</div><!-- /.content-post -->
								</article><!-- /.main-post single -->
							</div><!-- /.post-wrap -->


						</div><!-- /.col-md-8 col-lg-9 -->
						<div class="col-md-4 col-lg-3">
							<div class="sidebar left">
								<div class="widget widget-products">
									<div class="widget-title">
										<h3>最新产品</h3>
									</div>
									<ul class="product-list">
										<li th:each="food:${foods}" style="height: 100px;">
											<div class="img-product">
												<a th:href="'/page/foodDetail?foodId=' + ${food.id}" title="">
													<img style="width: 100px;height: 100px;"
														 th:src="'http://47.94.10.67/images/' + ${food.imgUrl}" alt="">
												</a>
											</div>
											<div class="info-product">
												<div class="name">
													<a th:href="'/page/foodDetail?foodId=' + ${food.id}" title="" th:text="${food.foodName}"></a>
												</div>
												<div class="price">
													<span class="sale" th:text="${food.nowPrice}"></span>
													<span class="regular" th:text="${food.oldPrice}"></span>
												</div>
											</div>
										</li>
									</ul>
								</div><!-- /.widget widget-products -->
							</div><!-- /.sidebar left -->
						</div><!-- /.col-md-4 col-lg-3 -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</section>

			<section class="flat-iconbox">
				<div class="container">
					<div class="row">
						<div class="col-md-3">
							<div class="iconbox">
								<div class="box-header">
									<div class="image">
										<img src="/images/icons/car.png" alt="">
									</div>
									<div class="box-title">
										<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">全球送货</font></font></h3>
									</div>
								</div><!-- /.box-header -->
								<div class="box-content">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">订单满$ 100免运费</font></font></p>
								</div><!-- /.box-content -->
							</div><!-- /.iconbox -->
						</div><!-- /.col-md-3 -->
						<div class="col-md-3">
							<div class="iconbox">
								<div class="box-header">
									<div class="image">
										<img src="/images/icons/order.png" alt="">
									</div>
									<div class="box-title">
										<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">在线订购服务</font></font></h3>
									</div>
								</div><!-- /.box-header -->
								<div class="box-content">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
								</div><!-- /.box-content -->
							</div><!-- /.iconbox -->
						</div><!-- /.col-md-3 -->
						<div class="col-md-3">
							<div class="iconbox">
								<div class="box-header">
									<div class="image">
										<img src="/images/icons/payment.png" alt="">
									</div>
									<div class="box-title">
										<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">付款</font></font></h3>
									</div>
								</div><!-- /.box-header -->
								<div class="box-content">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">安全系统</font></font></p>
								</div><!-- /.box-content -->
							</div><!-- /.iconbox -->
						</div><!-- /.col-md-3 -->
						<div class="col-md-3">
							<div class="iconbox">
								<div class="box-header">
									<div class="image">
										<img src="/images/icons/return.png" alt="">
									</div>
									<div class="box-title">
										<h3><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">返回30天</font></font></h3>
									</div>
								</div><!-- /.box-header -->
								<div class="box-content">
									<p><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">30天内免费退货</font></font></p>
								</div><!-- /.box-content -->
							</div><!-- /.iconbox -->
						</div><!-- /.col-md-3 -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</section>
			<div th:insert="~{footer :: #footer}"></div>

			<section class="footer-bottom">
				<div class="container">
					<div class="row">
						<div class="col-md-12">
							<p class="copyright"> All Rights Reserved © Techno Store 2017</p>
							<p class="btn-scroll">
								<a href="#" title="">
									<img src="/images/icons/top.png" alt="">
								</a>
							</p>
						</div><!-- /.col-md-12 -->
					</div><!-- /.row -->
				</div><!-- /.container -->
			</section><!-- /.footer-bottom -->

		</div>

		<!-- Javascript -->
		<script type="text/javascript" src="/javascript/jquery.min.js"></script>
		<script type="text/javascript" src="/javascript/tether.min.js"></script>
		<script type="text/javascript" src="/javascript/bootstrap.min.js"></script>
		<script type="text/javascript" src="/javascript/waypoints.min.js"></script>
		<script type="text/javascript" src="/javascript/jquery.circlechart.js"></script>
		<script type="text/javascript" src="/javascript/easing.js"></script>
		<script type="text/javascript" src="/javascript/jquery.flexslider-min.js"></script>
		<script type="text/javascript" src="/javascript/owl.carousel.js"></script>
		<script type="text/javascript" src="/javascript/smoothscroll.js"></script>
		<script type="text/javascript" src="/javascript/jquery-ui.js"></script>
		<script type="text/javascript" src="/javascript/jquery.mCustomScrollbar.js"></script>
	   	<script type="text/javascript" src="/javascript/gmap3.min.js"></script>
	   	<script type="text/javascript" src="/javascript/waves.min.js"></script>
		<script type="text/javascript" src="/javascript/jquery.countdown.js"></script>
		<script type="text/javascript" src="/javascript/main.js"></script>

	</body>	
</html>